import { useState } from 'react';
import styles from './App.module.less';
import Editor from './view/Editor';
import { appContext } from './config/context';
import ErrorBoundary from './components/ErrorBoundary';

const { Provider } = appContext;

function App() {
  const [readonly, setReadonly] = useState(false);

  return (
    <Provider value={{ readonly }}>
      <ErrorBoundary>
        <div className={styles['editor-root']}>
          <div className={styles['editor-header']}>
            <div className={styles['title']}>SlateEditor</div>
            <div className={styles['actions']}>
              <span title="编辑/只读" onClick={() => setReadonly(!readonly)}>
                {!readonly ? (
                  <svg
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="4"
                    viewBox="0 0 48 48"
                    aria-hidden="true"
                    focusable="false"
                    className="doc-icon doc-icon-file"
                  >
                    <path d="M16 21h16m-16 8h10m11 13H11a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h21l7 7v27a2 2 0 0 1-2 2Z"></path>
                  </svg>
                ) : (
                  <svg
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="4"
                    viewBox="0 0 48 48"
                    aria-hidden="true"
                    focusable="false"
                    className="doc-icon doc-icon-file"
                  >
                    <path d="m30.48 19.038 5.733-5.734a1 1 0 0 0 0-1.414l-5.586-5.586a1 1 0 0 0-1.414 0l-5.734 5.734m7 7L15.763 33.754a1 1 0 0 1-.59.286l-6.048.708a1 1 0 0 1-1.113-1.069l.477-6.31a1 1 0 0 1 .29-.631l14.7-14.7m7 7-7-7M6 42h36"></path>
                  </svg>
                )}
              </span>
            </div>
          </div>
          <div className={styles['editor-toobar']}></div>
          <div className={styles['editor-scroller']}>
            <Editor />
          </div>
        </div>
      </ErrorBoundary>
    </Provider>
  );
}

export default App;
